<template>
	<view class="store">
		<z-paging @query="queryList" ref="paging" v-model="storeList" loading-more-no-more-text="我也是有底线的！">
			<!-- <map style="width: 0; height: 0;" :latitude="latitude" :longitude="longitude">
			</map> -->
			<template #top>
				<view class="selectbox">
					<view class="city">
						<uni-data-picker placeholder="请选择省" popup-title="请选择所在地区" :localdata="dataTree" :clear-icon=false
							v-model="classes" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</view>

				</view>
			</template>
			<view class="content">
				<view class="list" @click="goStoreInfo(item.productId)" v-for="(item,index) in storeList" key="index">
					<view class="left">
						<image :src="item.pictureUrl" mode="widthFix"></image>

					</view>
					<view class="center">
						<view class="title">
							{{item.productName}}
						</view>
						<text class="address">{{item.title}}</text>
						<view class="time">
							<text>8:30-20:30</text>
						</view>
						<view class="count">
							<!-- <text class="price" v-if="vipLevel==0 && item.productId==18 && degree==1">￥150</text> -->
							<!-- <text class="price"
								v-if="vipLevel==1&&item.productId==18 && degree==1">￥{{oneValue*vipLevelCount}}</text> -->
						
							<!-- <text class="price" v-if="item.productId==18 && degree==1">￥{{135*vipLevelCount}}</text>
							<text class="price" v-if="item.productId==18 && degree==2">￥{{120*vipLevelCount}}</text>
							<text class="price" v-if="item.productId==18 && degree==3">￥{{105*vipLevelCount}}</text> -->
							<text class="price">￥{{item.price*vipLevelCount}}</text>
							
						<!-- 	<text class="uncountPrice" v-if="item.productId==18 && degree==1">原价：135</text>
							<text class="uncountPrice" v-if="item.productId==18 && degree==2">原价：120</text>
							<text class="uncountPrice" v-if="item.productId==18 && degree==3">原价：105</text> -->
							<text class="uncountPrice" >原价：{{item.price}}</text>
						</view>
					</view>
					<!-- 	<view class="right">  
					<image src="@/static/store/导航@3x.png" mode="widthFix"></image>
					<text>0.96km</text>
				</view> -->
				</view>

			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from "vue";
	import {dataTree} from '@/pages/tab/data.js'
	import { appInfo } from '@/config/config.js'

	const {
		proxy
	} = getCurrentInstance()
	const value = ref(0)
	const degree = ref(2)
	const classes = ref('1-1')
	const range = ref("未获取到位置")
	const paging = ref(null)
	const storeList = ref([])
	const gdAmap = ref()
	const latitude = ref(39.909)
	const longitude = ref(116.39742)

	let vipLevel = ref(0)
	let vipLevelCount = ref(1)

	const change = () => {}

	const goStoreInfo = (index) => {
		console.log(index)
		const aa = 11
		proxy.sjuNav.navigateTo('/my/storeInfo?id=' + index + '&count=' + vipLevelCount.value+ '&degree=' + degree.value)
	}

	// const getQueryIndexProduct = () => {
	// 	proxy.sjuAlert.showLoading()
	// 	proxy.sjuRequest.request("/api/weChatMall/product/queryIndexProduct", 'post').then(res => {
	// 		console.log(res)
	// 		if (res.code == '200') {
	// 			storeList.value = res.data.loveList
	// 			console.log(storeList.value)
	// 			proxy.sjuAlert.hideLoading()
	// 		} else {
	// 			proxy.sjuAlert.showError('获取数据失败，请重试！', '提示')
	// 		}


	// 	})
	// }

	const queryList = (pageNo, pageSize) => {
		proxy.sjuAlert.showLoading()
		console.log(pageNo, pageSize)
		proxy.sjuRequest.request("/api/weChatMall/product/queryMiaoMaGJProduct?pageNum=" + pageNo + "&pageSize=" +
			pageSize, 'post').then(res => {
			console.log(res)
			if (res.code == '200') {
				console.log(res.data.loveList.rows)
				paging.value.complete(res.data.loveList.rows);
				proxy.sjuAlert.hideLoading()
			} else {
				proxy.sjuAlert.hideLoading()
				proxy.sjuAlert.showError('获取数据失败，请重试！', '提示')
			}


		}).catch(err => {
			paging.value.complete(false);
			console.log(err)
		})

	}
	const onnodeclick = (e) => {
		degree.value = e.degree
		console.log(e);
		 proxy.sjuLogin.saveValue('cityService', e.text);
		console.log(proxy.sjuLogin.getValue('cityService'))
		
	}
	const onpopupopened = (e) => {
		console.log('popupopened');
	}
	const onpopupclosed = (e) => {
		console.log('popupclosed');
	}
	const onchange = (e) => {
		console.log('onchange:', e);
	}
	const getLocation = () => {
		proxy.sjuWeixin.getCurrentLoation().then(res => {
			proxy.sjuRequest.request("/api/weixin/queryAddress", 'post', {
				"latitude": res.latitude,
				"longitude": res.longitude
			}).then(
				res => {
					range.value = res.data
				}).catch(error => {

			})
		}).catch(error => {})

		// proxy.sjuWeixin.getCurrentLoation().then(res => {
		// 	alert(JSON.stringify(res));
		// }).catch(error => {})
		// console.log(123)
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	success: function(res) {
		// 		console.log('当前位置的经度：' + res.longitude);
		// 		console.log('当前位置的纬度：' + res.latitude);

		// 		getDistance(117.068051,36.678944,117.168051,36.688944)
		// 	}
		// });
	}
	//获取两坐标之间的距离
	const getDistance = (lat1, lon1, lat2, lon2) => {
		const earthRadius = 6371; // 地球半径，单位为千米
		console.log(lat1, lon1, lat2, lon2);
		// 将经纬度转换为弧度
		const radLat1 = (Math.PI / 180) * lat1;
		const radLon1 = (Math.PI / 180) * lon1;
		const radLat2 = (Math.PI / 180) * lat2;
		const radLon2 = (Math.PI / 180) * lon2;

		console.log(radLat1, radLat2, radLon1, radLon2);

		// 计算经纬度的差值
		const deltaLat = radLat2 - radLat1;
		const deltaLon = radLon2 - radLon1;
		console.log(deltaLat, deltaLon);

		// 使用Haversine公式计算距离
		const a =
			Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			Math.cos(radLat1) *
			Math.cos(radLat2) *
			Math.sin(deltaLon / 2) *
			Math.sin(deltaLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		const distance = earthRadius * c;
		console.log(distance.toFixed(2))

		return distance.toFixed(2); // 距离为千米返回保留两位小数的距离值
	};
	const vipLevelFun = () => { //+ proxy.sjuLogin.getValue("miaoOpenid")
		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("miaoMaGJOpenid")+'/'+appInfo.appId, 'post').then(
			res => {
				if (res.data) {
					console.log(res)
					let level = res.data.memberLevel
					console.log(res)
					if (level == 'jp') {
						vipLevel.value = 1
						vipLevelCount.value = 0.8
					} else if (level == 'jz') {
						vipLevel.value = 2
						vipLevelCount.value = 0.8
					}
				}

			})
	}
	onMounted(() => {
		// getQueryIndexProduct()
		vipLevelFun()
		 proxy.sjuLogin.saveValue('cityService', '徐州市');
	})
	onLoad((options) => {
		if (options.flag != 1) {
			window.location.href = "/pages/tab/store/store?flag=1";
		}
		getLocation();
	})
	onShow(() => { // + proxy.sjuLogin.getValue("miaoOpenid")
		proxy.sjuLogin.checkLogin('/pages/tab/store/store')
	})
</script>

<style lang="scss">
	.store {
		width: 100%;
		height: auto;
		overflow-y: scroll;
		min-height: 300px;

		::v-deep .uni-select__selector {
			z-index: 99 !important;
		}

		::v-deep .input-value-border {
			border: none
		}
		::v-deep.uni-data-tree-dialog{
			bottom:50px
		}

		.selectbox {
			width: 100%;
			height: 40px;

			background: #f3f3f3;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;


			.city {
				width: 150px;

				::v-deep.uni-select {
					border: none
				}
			}

			.location {
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

		.content {
			width: 100%;
			height: auto;
			padding: 20rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #F0E8E8;
				box-sizing: border-box;
				padding: 20rpx 0;

				.left {
					width: 30%;

					image {
						width: 100%
					}
				}

				.center {
					width: 60%;
					display: flex;
					flex-direction: column;
					line-height: 1.8;
					margin: 0 2%;

					.title {
						font-size: 28rpx;
						color: #161616;
						font-weight: bold;
					}

					.address {
						font-size: 23rpx;
						// color: #8D8D8D;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.time {
						text {
							color: #3A8AFB;
							padding: 5rpx 20rpx;
							background: #DAE9FF;
							font-size: 22rpx;
							border-radius: 10px;
						}
					}

					.count {
						color: #D43635;
						font-size: 32rpx;

						.uncountPrice {
							color: #8D8D8D;
							font-size: 22rpx;
							text-decoration: line-through;
							margin-left: 10rpx;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;

					image {
						width: 50rpx;
					}
				}
			}
		}
	}

	.pickerCon {
		display: flex;
		flex-direction: row;
		// justify-content: center;
		align-items: center;

	}
</style>